<template>
	<view class="course-cont box-padding" style="--px: 26rpx" :class="animation">
		<!-- 课程信息组件 -->
		<course-info :course="course"></course-info>
		<!-- 返回选择课程 -->
		<view style="margin: auto;margin-top: 160rpx;"><v-button @onclick="onStepBack">返回上一步</v-button></view>
		<!-- 选择试课时间 -->
		<view style="margin: auto;margin-top: 30rpx;"><v-button @onclick="onClickComplete">选择试课时间</v-button></view>
	</view>
</template>

<script>
import vButton from '@/components/button/button.vue';
import courseInfo from "@/components/course-info/course-info.vue";

export default {
	components: {
		vButton,
		courseInfo
	},
	props: {
		course: Object
	},
	data() {
		return {
			animation: "animation-slide-right"
		};
	},
	methods: {
		// 返回上一步
		onStepBack() {
			this.animation ="animation-slide-out-right";
			setTimeout(()=> this.$emit('back'),300);
		},
		// 下一步
		onClickComplete() {
			this.$emit('next');
		}
	}
};
</script>

<style lang="scss">
	@import "../../../common/animation.scss";
.course-cont {
	min-height: 100vh;
	background-color: $bg-color;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	overflow-y: auto;
	box-sizing: border-box;
	transform: translate3d(100%, 0, 0);
}
</style>
